<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<html>
	<head>
	    <title>JavaScript WebSocket</title>
	    
	    <script src="js/sockjs-0.3.4.js"></script>
	    <script src="js/stomp.js"></script>
	    
	    <script type="text/javascript">

	        var stompClient = null;

	        function setConnected(connected) {

	            document.getElementById('connect').disabled = connected;
	            document.getElementById('disconnect').disabled = !connected;
	            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
	            document.getElementById('response').innerHTML = '';
	        }

	        function connect() {

	            var socket = new SockJS('/stomp');
	            stompClient = Stomp.over(socket);

	            stompClient.connect({}, function(frame) {

	            	setConnected(true);
	                console.log('Connected: ' + frame);

	                stompClient.subscribe('/user/queue/reply/test-websocket', function(messageOutput) {
	                    showMessage(JSON.parse(messageOutput.body));
	                });

	                stompClient.subscribe('/user/queue/errors/test-websocket', function(error) {
	                	showError(error);
	                });

	            }, function(error) {
	            	showError(error);
	            });
	        }

	        function disconnect() {

	            if(stompClient != null) {
	                stompClient.disconnect();
	            }

	            setConnected(false);
	            console.log("Disconnected");
	        }

	        function sendMessage() {
	        	var from = document.getElementById('from').value;
	            var text = document.getElementById('text').value;
	            stompClient.send("/ws/stomp/test-websocket", {}, JSON.stringify({'from':from, 'text':text}));
	        }

	        function showMessage(messageOutput) {
	            var response = document.getElementById('response');
	            var p = document.createElement('p');
	            p.style.wordWrap = 'break-word';
	            p.appendChild(document.createTextNode(messageOutput.from + ": " + messageOutput.text + " (" + messageOutput.time + ")"));
	            response.appendChild(p);
	        }
	        
	        function showError(error) {
	            var response = document.getElementById('response');
	            var p = document.createElement('p');
	            p.style.wordWrap = 'break-word';
	            p.appendChild(document.createTextNode(error));
	            response.appendChild(p);
	        }

	    </script>
	    
	</head>
	
	<body onload="disconnect()">

		<div>
		
		
			<div>
				<input type="text" id="from" placeholder="Choose a nickname"/>
			</div>
			<br />
		    <div>
		        <button id="connect" onclick="connect();">Connect</button>
		        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
		    </div>
		    <br />
		    <div id="conversationDiv">
		        <input type="text" id="text" placeholder="Write a message..."/>
		        <button id="sendMessage" onclick="sendMessage();">Send</button>
		        <p id="response"></p>
		    </div>
		</div>

	</body>
</html>